<gm:page title="AshaEarthquakeMap" >

  <script>

  function moveMapToLocation(entry) {

     var map = google.mashups.getObjectById("map").getMap();
    var late = new GPath("geo:lat").getValue(entry);
    var longe = new GPath("geo:long").getValue(entry);
    var point = new GLatLng(late.valueOf(),longe.valueOf());

    var marker = new GMarker(point);
    map.addOverlay(marker);
    google.mashups.getObjectById("bubbleItem").setEntry(entry);
    marker.openInfoWindow(document.getElementById("bubbleItem"));
    map.setCenter(point, 1);
  }


</script>

<h1>    M5+ Earthquake CAP Alerts Map</h1>  

<table width="900">
  <tr valign="top">
    <td width="300" repeat="true">

      <gm:list id="myList" data=http://earthquake.usgs.gov/eqcenter/catalogs/caprss7days5.xml" pagesize="7">
        <gm:handleEvent event="select" execute="moveMapToLocation(event.entry);"/>

      </gm:list>
      <gm:item id="item" template="itemTemplate">
        <gm:handleEvent src="myList"/>
      </gm:item>

    </td>

    <td class="mainPanel">
      <gm:map id="map" zoom="1"/>
    </td>
  </tr>

</table>

<div style="visibility:hidden">
  <gm:item id="bubbleItem" template="bubbleTemplate"/>
</div>

<gm:template id="itemTemplate">
  <div>
    <b><gm:text ref="atom:title"/></b><br/>
    <gm:text ref="geo:lat"/><br/>

    <gm:text ref="geo:long"/> 
  </div>
</gm:template>

<gm:template id="bubbleTemplate">
  <div>
    <gm:text ref="atom:title"/>  <br/>

    <gm:text ref="atom:summary"/> <br/>
  </div>
</gm:template>

</gm:page>









































